<include file="Public/head" title="商品详情"/>
<div class="heard clear">
    <a href="javascript:;" onclick="history.go(-1)" class="l Return"><i class="iconfont icon-iconfontfanhui"></i></a>
    <div class="top_catgory clear">
        <a href="javascript:;" onclick="chg_page('goods',this)"><div class="top_cat active one">商品</div></a>
        <a href="javascript:" onclick="chg_page('detail',this)"><div class="top_cat two">详情</div></a>
    </div>
    <a href="javascript:;" class="r Six"><i class="iconfont icon-share"></i></a>
</div>
<div class="main" id="goods">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <foreach name="data.goods_pics" item="val">
            <div class="swiper-slide"><div class="shop_chart" style="background-image: url({$val})"></div></div>
            </foreach>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <div class="information">
        <div class="title">{$data.goods_name}</div>
        <div class="infor">
            <div class="l"><i class="iconfont icon-jiage-copy"></i><span>{$data.price}</span></div>
            <div class="r">已售<span class="index_list_num">{$data.sale_count}</span>辆</div>
        </div>
    </div>
	<if condition="$data.type eq '1'">
    <div class="select_color">
        <span>选择颜色</span><i class="iconfont icon-zuoyoujiantou2"></i>
    </div>
	</if>
    <div class="shop_info">{$data.profile}</div>
    <!--<img src="__PUBLIC__/home/image/shop_img.jpg" alt="" class="shop_img">-->
</div>
<style>
.main .detail img{width:100%;}
</style>
<div class="main" id="detail" style="display:none;">
    <!-- <img src="__PUBLIC__/home/image/shop_img1.jpg" alt="" class="shop_img"> -->
	<div class="detail">{:html_entity_decode($data['detail'])}</div>
    <div class="empty3rem"></div>
</div>
<!--弹出购买层-->
<div class="shop_mask">
    <div class="shop_m_warp">
        <div class="shop_head">
            <div class="shop_head_left">
                <div class="shop_head_img" style="background-image: url(__PUBLIC__/home/image/bike_show2.jpg)"></div>
            </div>
            <div class="shop_head_right">
                <div class="close">
                    <i class="iconfont icon-guanbi1"></i>
                </div>
                <div class="shop_head_money"><i class="iconfont icon-jiage-copy"></i><span id="price">{$data.price}</span></div>
                <div class="shop_head_num">库存 <span id="store">{$data.store}</span>件</div>
                <if condition="$data.type eq '1'"><div class="shop_head_type">选择 <span>颜色</span></div></if>
            </div>
        </div>
        <div class="shop_mask_bottom">
        	<if condition="$data.type eq '1'">
            <div class="shop_sider_color">
                <div>颜色分类</div>
                <div class="shop_color_warp">
                	<foreach name="data.spec" item="val">
                	<if condition="$val.store elt 0">
                    	<a href="javascript:;" data-store="{$val.store}" data-id="{$val.id}" class="disable">{$val.color}</a>
                    <else/>
                    	<a href="javascript:;" data-store="{$val.store}" data-id="{$val.id}">{$val.color}</a>
                    </if>
                    </foreach>
                </div>
            </div>
			</if>
            <div class="shop_sider_num">购买数量
                <div class="shop_num_warp">
                    <div class="num_add"><i class="iconfont icon-plus"></i></div>
                    <div class="num_ber">1</div>
                    <div class="num_ajj"><i class="iconfont icon-jian"></i></div>
                </div>
            </div>
            <if condition="$data['type'] eq '1' and ($vip_status eq '1' or $per_status eq '1')">
            <div class="shop_sider_type">
                <div>可选服务</div>
                <if condition="$vip_status eq '1'">
                <div class="shop_type_one clear">
                    <div class="shop_type_btn" data-price="{$data.vip_price}" data-service="2">VIP通道</div>
                    <div class="shop_type_right" > 一次支付全部金额，<br>  可享受专有的车身个性昵称雕刻</div>
                </div>
                </if>
                <if condition="$per_status eq '1'">
                <div class="shop_type_two clear">
                    <div class="shop_type_btn" data-price="{$data.per_first_price}" data-service="3">按天付</div>
                    <div class="shop_type_right" >先支付一定押金和首付金，<br>往后每天支付一定金额，可享受免息福利</div>
                </div>
                </if>
            </div>
            </if>
            <!-- 下单表单 -->
            <form id="dataForm">
	            <input type="hidden" name="goods_id" value="{$data.id}"/>
	            <input type="hidden" name="order_num" value="1"/>
	            <input type="hidden" name="spec_id" value=""/>
	            <input type="hidden" name="service" value="1"/>
            </form>
        </div>
    </div>
</div>
<!--弹出购买层-->
<!--分享-->
<div class="Fenxiang">
    <img src="__PUBLIC__/home/image/fenxiang.png" alt="">
</div>
<!--分享-->
<!--分享成功-->
<div class="Fenxiang_success">
    <div class="Position">
        <i class="iconfont icon-guanbi Position_close"></i>
        <div class="Fenxiang_warp">
            <div class="title">恭喜您!</div>
            <div class="con">分享成功获得<span>10</span>积分</div>
            <div class="btn">确定</div>
        </div>
    </div>
</div>
<!--分享成功-->
<button class="fiexd_button">立即购买</button>
<script src="__PUBLIC__/home/js/swiper.min.js"></script>
<link rel="stylesheet" href="__PUBLIC__/home/css/swiper.min.css">
<script>
var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    loop: true,
    // 如果需要分页器
    pagination: '.swiper-pagination'
});
$(function () {
	var Shop=$(".shop_info");
    if(Shop.html().length>50){
        var str=Shop.html().substr(0, 50);
        Shop.html(str);
    }
   //保存表单
    var is_sub = false;
    $(".fiexd_button").click(function () {
    	if(!$(".shop_mask").is(':visible')){
    		$(".shop_mask").show();
    	}else{
    		if(is_sub){
    			return false;
    		}else{
    			is_sub = true;
    		}
    		$.post(
   	        	"{:U('Order/edit_order')}",
   	        	$('#dataForm').serializeArray(),
   	        	function(data){
   	        		layer.msg(data.info);
   	        		if(data.status == '0') is_sub = false;
   	        		if(data.url != '') setTimeout("location.href='"+data.url+"'",1000);
   	        	}
   	        );
    	}
    });
    //设置规格
    $(".shop_color_warp a").click(function () {
    	var set_spec = function(){
			var store = '{$data.store}';
    		var spec_id = '';
			var spec_store = '';
    		$(".shop_color_warp a").each(function(){
    			if($(this).hasClass('active')) {
    				spec_id = $(this).attr('data-id');
    				spec_store = $(this).attr('data-store');
    				return false;
    			}
    		});
    		$('input[name=spec_id]').val(spec_id);
    		$('#store').text(spec_store == '' ? store : spec_store);
    	}
    	if($(this).hasClass('active')){
    		$(this).removeClass('active');
    	}else{
    		$(this).addClass('active').siblings().removeClass('active');
    	}
        set_spec();
    });
    //设置价格
    var set_price = function(){
    	var price = parseFloat('{$data.price}');
    	var order_num = parseInt($(".num_ber").text());
    	var service = '1';
    	$(".shop_sider_type .shop_type_btn").each(function(){
    		if($(this).hasClass('active')){
    			service = $(this).attr('data-service');
    			price = parseFloat($(this).attr('data-price'));
    			return false;
    		}
    	});
    	if(service != '1'){
    		order_num = 1;
    		$(".num_ber").text(1);
    	}
    	$('input[name=order_num]').val(order_num);
    	$('input[name=service]').val(service);
    	$('#price').text(price*order_num);
    }
    $(".shop_type_btn").click(function () {
        if($(this).hasClass('active')){
        	$(this).removeClass('active');
        }else{
        	$(".shop_sider_type .shop_type_btn").removeClass("active");
            $(this).addClass("active");
        }
        set_price();
    });
    $(".num_add").click(function () {
    	var Num = parseInt($(".num_ber").html());
        $(".num_ber").html(++Num);
        set_price();
    });
    $(".num_ajj").click(function () {
    	var Num = parseInt($(".num_ber").html());
        if(Num <= 1) return false;
        $(".num_ber").html(--Num);
        set_price();
    });
    $(".close i").click(function () {
        $(".shop_mask").hide();
    });
    
    $(".Six").click(function () {
        $(".Fenxiang").show();
    });
    $(".Fenxiang").click(function () {
        $(this).hide();
        $(".Fenxiang_success").show();
    });
    $(".Position_close").click(function () {
        $(".Fenxiang_success").hide();
    });
    $(".Fenxiang_warp .btn").click(function () {
        $(".Fenxiang_success").hide();
    });
    $(".select_color").click(function () {
        $(".shop_mask").show();
    })
})
function chg_page(id,obj){
	$('#'+id).show().siblings('.main').hide();
	$(obj).find('div').addClass('active');
	$(obj).siblings().find('div').removeClass('active');
}
</script>
<include file="Public/foot"/>